<script setup>
import { ref, onMounted } from 'vue'
import * as T from 'three';

const width = window.innerWidth, height = window.innerHeight;

//创建场景
const scene = new T.Scene()

//创建相机
const camera = new T.PerspectiveCamera()

//创建渲染器
const renderer = new T.WebGLRenderer()
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

//创建几何体
const geometry = new T.BoxGeometry(1, 1, 1)
//创建材质
const material = new T.MeshBasicMaterial({color: "green"})
//创建网格
const cube = new T.Mesh(geometry, material)

//添加到场景中
scene.add(cube)

//设置相机位置
camera.position.z = 5
camera.lookAt(0, 0, 0)

//开始渲染
renderer.render(scene, camera)

//渲染动画
;(function animate(){
    //旋转
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01

    renderer.render(scene, camera)

    requestAnimationFrame(animate)
})()

</script>